<script setup>
import {goCommunity, goNeigh, goRecycleOrderList, goRentandsell} from "../../tools/go";

const kj = [
  {id:'1',name:"新房",img:'./static/img/community/hire/xf.png'},
  {id:'2',name:"二手房",img:'./static/img/community/hire/esf.png'},
  {id:'3',name:"租房",img:'./static/img/community/hire/zf.png' ,action:goRentandsell },
  {id:'4',name:"卖房",img:'./static/img/community/hire/mf.png'},
]
//快捷方式2
const kj2 = [
  {id:'1',name:"精装修",img:'./static/img/community/hire/jzx.png'},
  {id:'2',name:"电梯房",img:'./static/img/community/hire/dtf.png'},
  {id:'3',name:"近地铁",img:'./static/img/community/hire/jdt.png'},
  {id:'4',name:"养宠物",img:'./static/img/community/hire/ycw.png'},
  {id:'5',name:"带阳台",img:'./static/img/community/hire/dyt.png'},
]
//房源Availability
const Availability = [
  { id: '1', name: "大床房", age: '1900~2300&nbsp;&nbsp;元/月', img: './static/img/community/hire/fyn.jpeg' },
  { id: '2', name: "电视房", age: '2000~2500&nbsp;&nbsp;元/月', img: './static/img/community/hire/fyt.jpeg' },
  { id: '3', name: "新房", age: '1900~2300&nbsp;&nbsp;元/月', img: './static/img/community/hire/fys.jpeg' },
  { id: '4', name: "二手房", age: '2000~2500&nbsp;&nbsp;元/月', img: './static/img/community/hire/fyf.png' },
  { id: '5', name: "新房", age: '1900~2300&nbsp;&nbsp;元/月', img: './static/img/community/hire/fys.jpeg' },
  { id: '6', name: "二手房", age: '2000~2500&nbsp;&nbsp;元/月', img: './static/img/community/hire/fyf.png' },
];
// 点击服务项触发对应操作
const handleServiceClick = (item) => {
  if (item.action && typeof item.action === 'function') {
    item.action();
  }
};
</script>

<template>
  <view class="titli">
    <v-icon @click="goCommunity()" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>房屋租售</h3>
  </view>
  <view class="bg">
    <img src="../../static/img/community/hire/fwzstp.jpg" alt="">
  </view>
<!-- 搜索框 -->
  <view class="search">
    <view class="search-one">
      <v-icon icon="mdi-magnify"></v-icon>
      <input type="text" placeholder="请输入地铁、商品、地点搜索">
    </view>
    <view class="saerch-tow">
      <v-icon icon="mdi-map-marker"></v-icon>
      <text>服务</text>
    </view>
  </view>
<!-- 快捷方式  -->
  <view class="quick w">
    <ul>
      <li v-for="(item) in kj" @click="handleServiceClick(item)">
        <a>
          <img :src="item.img">
          <text>{{ item.name }}</text>
        </a>
      </li>
    </ul>
  </view>
<!-- 广告 -->
  <view class="ad w">
    <text>定制您的专属房源</text>
    <view class="gg">
      <h4>填写找房需求</h4>
      <button>马上填写</button>
    </view>
  </view>
<!-- 快捷方式2 -->
  <view class="quick2">
    <ul>
      <li v-for="(item) in kj2">
        <a>
          <img :src="item.img">
          <text>{{ item.name }}</text>
        </a>
      </li>
    </ul>
  </view>
<!-- 房源 -->
  <view class="Availability w">
    <h4>优质房源</h4>
    <ul>
      <li v-for="item in Availability" :key="item.id">
        <img :src="item.img">
        <text class="t">{{ item.name }}</text>
        <text class="x" v-html="item.age"></text>
      </li>
    </ul>
  </view>
</template>

<style scoped lang="scss">
@import "../../static/css/title/index.css";
//房源
.Availability{
  ul::-webkit-scrollbar {
    display: none;
  }
  ul {
    li {
      img{
        width: 100%;
        height: 150px;
      }
      .x{
        color: red;
      }
      .t {
        margin-top: 4px;
        font-weight: 700;
      }
      display: flex;
      flex-direction: column;
      margin-left: 6px;
      width: 250px;
    }
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    width: 100%;
    overflow: auto;
  }
  h4{
    font-size: 18px;
    margin-bottom: 10px;
  }
  margin-top: 10px;
}
// 快捷方式2
.quick2 {
  ul {
    li {
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
        }
        text {
          font-size: 15px;
          color: #000000;
          margin-top: 4px;
        }
      }
      flex: 1;
    }
    display: flex;
  }
  margin-top: 20px;
}
//公告
.ad {
  .gg{
    button{
      width: 82px;
      height: 30px;
      line-height: 30px;
      border-radius: 115px;
      background: #FF702E;
      color: #FFFFFF;
      font-size: 14px;
    }
    h4{
      font-weight: 400;
      font-size: 18px;
    }
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
  }
  text{
    font-size: 14px;
  }
  padding: 12px;
  border: 1px solid #FF702E;
  border-radius: 8px;
}
//快捷方式
.quick {
  ul {
    li {
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
        }
        text {
          font-size: 15px;
          color: #000000;
          margin-top: 4px;
        }
      }
      flex: 1;
    }
    display: flex;
  }
  background: #FFFFFF;
}
//搜索框
.search {
  .saerch-tow{
    display: flex;
    align-items: center;
    width: 20%;
    height: 20px;
    border-left: 1px solid #595959;
    justify-content: center;
  }
  .search-one{
    input{
      margin-left: 4px;
      width: 90%;
      border: none;
      outline: none
    }
    display: flex;
    align-items: center;
    width: 80%;
    padding: 12px;
  }
  width: 90%;
  height: 50px;
  margin: 0 auto;
  position: relative;
  top: -10px;
  background: #FFFFFF;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
//背景
.bg {
  width: 100%;
  height: 25vh;
  img {
    width: 100%;
    height: 100%;
  }
}
body{
  background: #FFFFFF;
}
</style>